<template>
	<view class="success-container">
		<!-- 顶部装饰波浪 -->
		<view class="wave-container">
			<view class="wave"></view>
			<view class="wave wave2"></view>
		</view>
		
		<!-- 成功图标和动画 -->
		<view class="success-icon-container">
			<view class="success-circle">
				<text class="checkmark">✓</text>
			</view>
			<view class="success-ripple"></view>
		</view>
		
		<!-- 成功消息 -->
		<view class="success-message">
			<text class="success-title">{{ action === 'signout' ? '签退成功' : '签到成功' }}</text>
			<text class="success-subtitle">{{ action === 'signout' ? '您已成功签退此次培训' : '您已成功签到此次培训' }}</text>
		</view>
		
		<!-- 培训信息卡片 -->
		<view class="training-card">
			<view class="training-card-header">
				<text class="training-card-title">培训详情</text>
			</view>
			
			<!-- 加载状态 -->
			<view v-if="loading" class="loading-container">
				<view class="loading-spinner"></view>
				<text class="loading-text">正在获取培训详情...</text>
			</view>
			
			<!-- 培训详情内容 -->
			<view v-else class="training-card-content">
				<view class="info-item">
					<view class="info-icon title-icon"></view>
					<view class="info-content">
						<text class="info-label">培训主题</text>
						<text class="info-value">{{trainingInfo.teach_name || trainingInfo.title || '企业培训课程'}}</text>
					</view>
				</view>
				
				<view class="info-item">
					<view class="info-icon time-icon"></view>
					<view class="info-content">
						<text class="info-label">{{action === 'signout' ? '签退时间' : '签到时间'}}</text>
						<text class="info-value">{{signInTime}}</text>
					</view>
				</view>
				
				<view class="info-item">
					<view class="info-icon location-icon"></view>
					<view class="info-content">
						<text class="info-label">培训地点</text>
						<text class="info-value">{{trainingInfo.location || trainingInfo.teach_address || '培训地点'}}</text>
					</view>
				</view>
				
			</view>
		</view>
		
		<!-- 按钮区域 -->
		<view class="action-buttons">
			<view class="primary-btn" @click="goToDetail">
				<text>查看详情</text>
			</view>
			<view class="secondary-btn" @click="goToHome">
				<text>返回首页</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				signInTime: '',
				trainingInfo: {
					title: '',
					location: '',
					teach_name: '',
					teach_address: ''
				},
				// 🎯 新增参数
				teachId: '', // 培训ID
				sessionId: '', // 场次ID
				action: '', // 操作类型：signin/signout
				fromSignin: false, // 是否来自签到页面
				fromSurvey: false, // 是否来自问卷页面
				loading: true // 加载状态
			}
		},
		onLoad(options) {
			console.log('🔍 Success页面参数:', options);
			
			// 🎯 获取新的参数
			this.teachId = options.teach_id || '';
			this.sessionId = options.session_id || '';
			// 🔧 重要：正确识别签到/签退状态
			this.action = options.action || options.type || 'signin'; // 支持action或type参数
			this.fromSignin = options.from_signin === 'true';
			this.fromSurvey = options.from_survey === 'true';
			
			// 🔧 调试日志：确保正确识别状态
			console.log('📋 操作状态识别:', {
				action: this.action,
				isSignOut: this.action === 'signout',
				params: options
			});
			
			// 获取当前时间作为签到时间
			this.setCurrentTime();
			
			// 🔧 如果有teachId，获取真实的培训数据
			if (this.teachId) {
				this.loadTrainingData();
			} else {
				// 兜底：使用传入的参数
				if (options.title) {
					this.trainingInfo.title = options.title;
					this.trainingInfo.teach_name = options.title;
				}
				if (options.location) {
					this.trainingInfo.location = options.location;
					this.trainingInfo.teach_address = options.location;
				}
				this.loading = false;
			}
		},
		methods: {
			// 🔧 加载培训数据 - 根据teach_id从fa_teach表获取
			async loadTrainingData() {
				try {
					this.loading = true;
					
					// 从store获取用户信息
					const userInfo = this.$store.getters.userInfo;
					const apiUrl = this.$store.getters.getApiUrl('v2');
					
					console.log('📤 获取培训详情，参数:', {
						teachId: this.teachId,
						userid: userInfo.userid
					});
					
					// 调用teach-detail接口根据teach_id获取培训详情
					const response = await uni.request({
						url: `${apiUrl}/teach-detail`,
						method: 'GET',
						data: {
							teach_id: this.teachId,
							userid: userInfo.userid
						}
					});
					
					console.log('📥 培训详情响应:', response.data);
					
					if (response.data && response.data.status === 1 && response.data.data) {
						const teachData = response.data.data;
						
						// 更新培训信息 - 只保留必要字段
						this.trainingInfo = {
							title: teachData.teach_name || '培训课程',
							location: teachData.teach_address || '培训地点',
							teach_name: teachData.teach_name,
							teach_address: teachData.teach_address
						};
						
						console.log('✅ 培训信息已更新:', this.trainingInfo);
					} else {
						console.warn('⚠️ 未获取到培训详情，使用默认信息');
						this.setDefaultTrainingInfo();
					}
					
				} catch (error) {
					console.error('❌ 获取培训详情失败:', error);
					this.setDefaultTrainingInfo();
				} finally {
					this.loading = false;
				}
			},
			
			// 设置默认培训信息
			setDefaultTrainingInfo() {
				this.trainingInfo = {
					title: '企业培训课程',
					location: '培训地点',
					teach_name: '企业培训课程',
					teach_address: '培训地点'
				};
			},
			
			// 设置当前时间
			setCurrentTime() {
				const now = new Date();
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0');
				const day = String(now.getDate()).padStart(2, '0');
				const hour = String(now.getHours()).padStart(2, '0');
				const minute = String(now.getMinutes()).padStart(2, '0');
				const second = String(now.getSeconds()).padStart(2, '0');
				
				this.signInTime = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
			},
			
			// 跳转到详情页
			goToDetail() {
				if (this.teachId && this.sessionId) {
					// 🎯 优先使用培训ID和场次ID跳转到详情页
					uni.redirectTo({
						url: `/pages/dtest/detail?teach_id=${this.teachId}&session_id=${this.sessionId}`
					});
				} else if (this.teachId) {
					// 兜底方案1：只有培训ID
					uni.redirectTo({
						url: `/pages/dtest/detail?teach_id=${this.teachId}`
					});
				} else {
					// 兜底方案2：使用培训编号
					uni.redirectTo({
						url: '/pages/dtest/detail?number=' + (this.trainingInfo.code || '')
					});
				}
			},
			
			// 返回首页
			goToHome() {
				// 🎯 需求二：如果是从签到页面或问卷页面来的，使用reLaunch清空页面栈
				if (this.fromSignin || this.fromSurvey) {
					uni.reLaunch({
						url: '/pages/dtest/home'
					});
				} else {
					uni.switchTab({
						url: '/pages/dtest/home'
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	// 整体容器样式
	.success-container {
		min-height: 100vh;
		background-color: #f7f9fc;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 30rpx 60rpx;
		position: relative;
		overflow: hidden;
	}
	
	// 顶部波浪效果
	.wave-container {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 280rpx;
		overflow: hidden;
	}
	
	.wave {
		position: absolute;
		top: -20rpx;
		left: 0;
		width: 200%;
		height: 280rpx;
		background: linear-gradient(90deg, #2979ff, #56acf9);
		border-radius: 0 0 50% 50%;
		animation: wave 12s linear infinite;
	}
	
	.wave2 {
		top: -10rpx;
		opacity: 0.5;
		animation: wave 8s linear infinite;
		animation-delay: -3s;
	}
	
	@keyframes wave {
		0% {
			transform: translateX(0) scale(1.2);
		}
		100% {
			transform: translateX(-50%) scale(1.2);
		}
	}
	
	// 成功图标和动画
	.success-icon-container {
		margin-top: 180rpx;
		position: relative;
		z-index: 10;
		width: 180rpx;
		height: 180rpx;
		margin-bottom: 40rpx;
	}
	
	.success-circle {
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
		background-color: #19be6b;
		box-shadow: 0 20rpx 30rpx rgba(25, 190, 107, 0.3);
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 2;
	}
	
	.checkmark {
		font-size: 120rpx;
		color: #fff;
		font-weight: bold;
		line-height: 1;
		text-align: center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	
	.success-ripple {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		border-radius: 50%;
		border: 6rpx solid #19be6b;
		animation: ripple 2s ease-out infinite;
		z-index: 1;
	}
	
	@keyframes ripple {
		0% {
			transform: scale(0.9);
			opacity: 0.8;
		}
		100% {
			transform: scale(1.5);
			opacity: 0;
		}
	}
	
	// 成功消息样式
	.success-message {
		text-align: center;
		margin-bottom: 60rpx;
		z-index: 10;
	}
	
	.success-title {
		font-size: 44rpx;
		font-weight: bold;
		color: #303133;
		margin-bottom: 16rpx;
		display: block;
	}
	
	.success-subtitle {
		font-size: 28rpx;
		color: #606266;
		display: block;
	}
	
	// 培训信息卡片
	.training-card {
		width: 100%;
		background-color: #ffffff;
		border-radius: 24rpx;
		box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.05);
		margin-bottom: 50rpx;
		overflow: hidden;
		z-index: 10;
	}
	
	.training-card-header {
		padding: 30rpx;
		background: linear-gradient(to right, #f8f9fc, #ffffff);
		border-bottom: 1px solid #ebeef5;
	}
	
	.training-card-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #303133;
		position: relative;
		padding-left: 20rpx;
	}
	
	.training-card-title::before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 8rpx;
		height: 32rpx;
		background-color: #2979ff;
		border-radius: 4rpx;
	}
	
	.training-card-content {
		padding: 30rpx;
	}
	
	// 加载状态
	.loading-container {
		padding: 60rpx 30rpx;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20rpx;
	}
	
	.loading-spinner {
		width: 40rpx;
		height: 40rpx;
		border: 3rpx solid #e4e7ed;
		border-top: 3rpx solid #2979ff;
		border-radius: 50%;
		animation: spin 1s linear infinite;
	}
	
	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}
	
	.loading-text {
		font-size: 26rpx;
		color: #909399;
		margin-top: 10rpx;
	}
	
	.info-item {
		display: flex;
		margin-bottom: 40rpx;
		align-items: flex-start;
	}
	
	.info-item:last-child {
		margin-bottom: 0;
	}
	
	.info-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
		border-radius: 6rpx;
		position: relative;
	}
	
	// 标题图标
	.title-icon {
		background-color: rgba(41, 121, 255, 0.1);
	}
	
	.title-icon::before {
		content: '';
		position: absolute;
		width: 20rpx;
		height: 4rpx;
		background: #2979ff;
		top: 12rpx;
		left: 10rpx;
	}
	
	.title-icon::after {
		content: '';
		position: absolute;
		width: 12rpx;
		height: 4rpx;
		background: #2979ff;
		top: 22rpx;
		left: 10rpx;
	}
	
	// 时间图标
	.time-icon {
		background-color: rgba(255, 153, 0, 0.1);
	}
	
	.time-icon::before {
		content: '';
		position: absolute;
		width: 20rpx;
		height: 20rpx;
		border: 2rpx solid #ff9900;
		border-radius: 50%;
		top: 8rpx;
		left: 9rpx;
	}
	
	.time-icon::after {
		content: '';
		position: absolute;
		width: 6rpx;
		height: 2rpx;
		background: #ff9900;
		top: 18rpx;
		left: 19rpx;
		transform: rotate(45deg);
		box-shadow: 0 -8rpx 0 #ff9900;
	}
	
	// 地点图标
	.location-icon {
		background-color: rgba(245, 108, 108, 0.1);
	}
	
	.location-icon::before {
		content: '';
		position: absolute;
		width: 16rpx;
		height: 16rpx;
		border: 2rpx solid #f56c6c;
		border-radius: 50% 50% 50% 0;
		transform: rotate(-45deg);
		top: 8rpx;
		left: 10rpx;
	}
	
	.location-icon::after {
		content: '';
		position: absolute;
		width: 4rpx;
		height: 4rpx;
		background: #f56c6c;
		border-radius: 50%;
		top: 14rpx;
		left: 16rpx;
	}
	
	
	.info-content {
		flex: 1;
	}
	
	.info-label {
		font-size: 24rpx;
		color: #909399;
		margin-bottom: 10rpx;
		display: block;
	}
	
	.info-value {
		font-size: 30rpx;
		color: #303133;
		font-weight: 500;
		line-height: 1.5;
		display: block;
	}
	
	// 按钮区域
	.action-buttons {
		display: flex;
		width: 100%;
		justify-content: space-between;
		margin-bottom: 80rpx;
		z-index: 10;
	}
	
	.primary-btn, .secondary-btn {
		width: 46%;
		padding: 16rpx 0;
		border-radius: 8rpx;
		text-align: center;
		transition: all 0.3s;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 56rpx;
	}
	
	.primary-btn {
		background: linear-gradient(to right, #2979ff, #56b3ff);
		box-shadow: 0 6rpx 15rpx rgba(41, 121, 255, 0.15);
	}
	
	.primary-btn:active {
		transform: translateY(1rpx);
		box-shadow: 0 3rpx 8rpx rgba(41, 121, 255, 0.15);
	}
	
	.primary-btn text {
		color: #ffffff;
		font-size: 26rpx;
		font-weight: 500;
	}
	
	.secondary-btn {
		background: #ffffff;
		border: 2rpx solid #e4e7ed;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}
	
	.secondary-btn:active {
		transform: translateY(1rpx);
		box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.05);
	}
	
	.secondary-btn text {
		color: #606266;
		font-size: 26rpx;
		font-weight: 500;
	}
</style>
